import React, { Component } from 'react';
import { user_register } from '../utils/api'
import { Button, Space, Toast } from 'antd-mobile'
import './Register.scss'
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            pass: '',
            chekpassword: ''
        }
    }
    handleChange(e) {
        this.setState({ [e.target.name]: (e.target.value) }, () => {
            console.log(this.state)
        })
    }
    toLogin() {
        this.props.history.push('/login')
    }
    handleClick() {
        if (this.state.phone === '') {
            alert('手机号不能为空')
        } else if ((/^1[3-9]\d{9}$/).test(this.state.phone) == false) {
            alert('手机号不正确')
        } else if (this.state.pass === "" || this.state.chekpassword === "") {
            alert('密码/确认密码不能为空')
        } else if (this.state.pass != this.state.chekpassword) {
            alert('密码与确认密码不一致')
        } else {
            let newpassword = JSON.parse(JSON.stringify(this.state))
            console.log(newpassword)
            delete newpassword.chekpassword
            console.log('newpassword', newpassword)
            user_register(newpassword).then((res) => {
                console.log(res.data)
                if (res.data.status == 'no') {
                    console.log(res.data)
                    Toast.show({
                        icon: 'fail',
                        content: res.data.msg,
                    })
                } else {
                    console.log(res.data)
                    Toast.show({
                        icon: 'success',
                        content: res.data.msg,
                    })
                    this.props.history.push('/login')
                }

            })
        }
    }

    render() {
        return (
            <div className='reg'>
                <h1>注册</h1>
                <div className="register">
                    <input type="name" name='phone' value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder='请输入手机号' />
                    <input type="password" name='pass' value={this.state.pass} onChange={(e) => { this.handleChange(e) }} placeholder='请输入密码' />
                    <input type="password" name='chekpassword' value={this.state.chekpassword} onChange={(e) => { this.handleChange(e) }} placeholder='请确认密码' />
                    <input type="submit" onClick={() => { this.handleClick() }} value={'注册'} style={{ backgroundColor: 'hotpink', color: 'white', fontSize: "16px" }} />
                    <p style={{ color: "white" }} onClick={() => { this.props.history.push('/register') }}>注册</p>
                </div>
                <div className="tologin">该账号已注册，去 <span onClick={() => { this.toLogin() }}>登录</span></div>
            </div>
        );
    }
}

export default Login;